<script setup>

import {getCurrentInstance, reactive, ref} from "vue";
import {jobConcurrentStatusList, jobGroupStatusList, jobMisfirePolicyTypeList} from "@/enum/enum";
import Icon from "@/components/Icon/index.vue";
import {enumToArray} from "@/utils/utils";
import CronTab from "@/components/Crontab/index.vue";
import {cloneDeep} from "lodash";
import {addSysJob, getSysJob, updateSysJob} from "@/api/monitor/sys_job";

const {proxy} = getCurrentInstance();
const emit = defineEmits(['success']);
const modalRef = ref();
const formRef = ref();
const cronTabRef = ref();
const rules = reactive({
  jobName: [
    {required: true, message: '请输入任务名称', trigger: 'blur'}
  ],
})
const formType = ref('create')
const formData = ref({
  jobId: undefined,
  jobName: null,
  jobGroup: null,
  invokeTarget: null,
  cronExp: null,
  misfirePolicy: 1,
  concurrent: 0,
  status: 0,
  remark: null,
})

const open = async (jobId, type = 'create') => {
  formType.value = type;
  resetForm();
  if (type === 'create') {
  } else {
    const {data} = await getSysJob(jobId);
    formData.value = {
      ...data
    }
  }
  modalRef.value.handleOpen()
}

const handleSubmit = async () => {
  await formRef.value.validate();
  let data = cloneDeep(formData.value);
  console.log(data)
  console.log(data.jobId === undefined)
  if(data.jobId === undefined){
    await addSysJob(data);
    proxy.$modal.okNotify('新增成功');
  }else{
    await updateSysJob(data);
    proxy.$modal.okNotify('修改成功');
  }
  resetForm();
  modalRef.value.handleClose();
  emit('success');
}

const resetForm = () => {
  formRef.value?.resetFields();
  formData.value = {
    jobId: undefined,
    jobName: null,
    jobGroup: null,
    invokeTarget: null,
    cronExp: null,
    misfirePolicy: 1,
    concurrent: 0,
    status: 0,
    remark: null,
  }
}

const openCronModal = () => {
  cronTabRef.value.handleOpen();
}

const cronTabFill = (value) => {
  formData.value.cronExp = value;
}

defineExpose({open})
</script>

<template>
  <dialog-form ref="modalRef" :modalTitle="`${formType === 'create' ? '新建' : '编辑'}任务`" modalWidth="800px"
               @submit="handleSubmit">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="任务名称" prop="jobName">
            <el-input v-model="formData.jobName" placeholder="请输入任务名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务分组" prop="jobGroup">
            <el-select v-model="formData.jobGroup" placeholder="请选择任务分组">
              <el-option v-for="item in jobGroupStatusList" :key="item.value" :value="item.value" :label="item.label"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="调用方法" prop="invokeTarget">
        <template #label>
          <div class="flex items-center">
            <el-tooltip placement="top">
              <template #content>
                Bean调用示例：demoTask.demoParams('demo')<br/>
                Class类调用示例：com.example.demo.task.DemoTask.demoParams('demo')<br/>
                参数说明：支持字符串，布尔类型，长整型，浮点型，整型"<br/>
              </template>
              <icon icon="ep:info-filled" class="mr-1 cursor-pointer" size="16px" color="#333"/>
            </el-tooltip>
            调用方法
          </div>
        </template>
        <template #default>
          <el-input v-model="formData.invokeTarget" placeholder="请输入调用目标字符串"/>
        </template>
      </el-form-item>
      <el-form-item label="cron表达式" prop="cronExp">
        <el-input v-model="formData.cronExp" placeholder="请输入cron执行表达式">
          <template #append>
            <div class="cursor-pointer flex items-center" @click="openCronModal">
              生成表达式
              <icon icon="ep:clock" size="16px" color="#a3a5aa" class="ml-2"/>
            </div>
          </template>
        </el-input>
      </el-form-item>
      <el-row>
        <el-col :span="16">
          <el-form-item label="执行策略" prop="misfirePolicy">
            <el-radio-group v-model="formData.misfirePolicy">
              <el-radio-button v-for="item in enumToArray(jobMisfirePolicyTypeList)" :label="item.label"
                               :key="item.value" :value="item.value"/>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否并发" prop="concurrent">
            <el-radio-group v-model="formData.concurrent">
              <el-radio-button v-for="item in enumToArray(jobConcurrentStatusList)" :label="item.label"
                               :key="item.value" :value="item.value"/>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </dialog-form>

  <cron-tab ref="cronTabRef" :expression="formData.cronExp" @fill="cronTabFill"/>
</template>

<style scoped lang="scss">

</style>
